<template>
  <div class="money">

  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane v-for="item in titleList" :key="item.name" :label="item.label" :name="item.name">

    </el-tab-pane>


  </el-tabs>
  <!-- <el-tab-pane
            :label="item.label"
            :name="item.name"
            v-for="(item, index) in titleList"
            :key="index"
          /> -->

    <div class="top">
      <!-- 租币充值 -->
      <div class="title">温馨提示：确保{{ activeName == 'power' ? '电费' :'水费' }}已收到后,再进行充值</div>
    </div>

    <div class="content">
      <div class="form">
        <el-form :model="charge" label-width="100px" class="demo-ruleForm">
          <el-form-item label="充值设备">
            <el-autocomplete
              ref="autocomplete"
              @clear="clear"
              clearable
              value-key="meterName"
              v-model="charge.meterName"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入设备名称进行搜索"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="租币余额">
            <el-input disabled v-model="charge.zubi">
              <template slot="append">租币</template></el-input
            >
          </el-form-item>
          <el-form-item :label=" `${activeName == 'power' ? '电费' :'水费'}表号`">
            <el-input disabled v-model="charge.meterNumber"></el-input>
          </el-form-item>
          <el-form-item :label=" `${activeName == 'power' ? '电费' :'水费'}单价`">
            <el-input disabled v-model="charge.meterSinglePrice">
              <template slot="append">元/度</template></el-input
            >
          </el-form-item>
          <el-form-item label="倍率">
            <el-input disabled v-model="charge.chargeTimes"></el-input>
          </el-form-item>
          <el-form-item :label=" `剩余${activeName == 'power' ? '电量' :'水量'}`">
            <el-input disabled v-model="charge.meterSurplusCount">
              <template slot="append">度</template></el-input
            >
          </el-form-item>
          <el-form-item :label=" `充值${activeName == 'power' ? '电量' :'水量'}`">
            <el-input disabled v-model="charge.meterCount">
              <template slot="append">度</template></el-input
            >
          </el-form-item>
          <el-form-item label="充值金额">
            <div class="box">
              <div
                class="item"
                @click="select(index)"
                :class="{ select: item.select == true }"
                v-for="(item, index) in moneyList"
                :key="index"
              >
                {{ item.num }}元
              </div>
              <el-input
                type="number"
                @focus="focus"
                @input="input"
                v-model="inputPrice"
                clearable
                placeholder="自定义金额"
              >
                <template slot="append">元</template>
              </el-input>
              <div class="btn">
                <el-button
                  :disabled="
                    charge.meterNumber && Number(charge.zubi) > 0 ? false : true
                  "
                  type="danger"
                  @click="clearZubi"
                  >租币清零</el-button
                >
              </div>
              <div class="btn">
                <el-button
                  :disabled="
                    charge.meterNumber && (inputPrice || charge.money)
                      ? false
                      : true
                  "
                  type="primary"
                  @click="pay"
                  >立即充值</el-button
                >
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDevice1Api,
  getZubiApi,
  postZubiApi,
  clearZubiApi,
} from "../../api/devive";
export default {
  data() {
    return {
      meterId: "",
      meterData: [],
      charge: {
        meterName: "",
        meterNumber: "",
        meterSurplusCount: "",
        meterSinglePrice: "",
        meterCount: 0,
        money: 100,
        chargeTimes: "",
        zubi: "",
      },
      inputPrice: "",
      moneyList: [
        {
          num: 100,
          select: true,
        },
        {
          num: 300,
          select: false,
        },
        {
          num: 500,
          select: false,
        },
        {
          num: 1000,
          select: false,
        },
      ],
// tab主体数据
      titleList: [
        {
          label: "电表",
          name: "power",
         
        },
        {
          label: "水表",
          name: "water",
   
        }
      ],
      activeName:'power' // tab 栏当前所停留的名称
    };
  },
  methods: {
//   tab栏切换的方法
handleClick(tab, event) {
console.log('切换了tab',tab, event);
// 清除数据 
 this.charge = {
        meterName: "",
        meterNumber: "",
        meterSurplusCount: "",
        meterSinglePrice: "",
        meterCount: 0,
        money: 100,
        chargeTimes: "",
        zubi: "",
      }
this.inputPrice=''
},




    // 获取租币余额
    getZubi(id) {
      getZubiApi(id).then((res) => {
        if (res.code == 200) {
          this.charge.zubi = res.data;
        }
      });
    },
    querySearchAsync(e, d) {
      this.inputPrice = "";
      for (var i = 0; i < this.moneyList.length; i++) {
        this.moneyList[i].select = false;
      }
      this.moneyList[0].select = true;
      this.charge.money = 100;
      // 根据当前用户许切换的是电费还是水费请求数据
      const type =this.activeName == 'power'? 1 :2
      getDevice1Api("", "", "", type).then((res) => {
        console.log('发送了请求');
        
        if (res.code == 200) {
          this.meterData = res.data;
          let search = [];
          if (e) {
            res.data.filter((item) => {
              if (item.meterName.indexOf(e) !== -1) {
                search.push(item);
              }
            });
          } else {
            search = res.data;
          }
          d(search);
        }
      });
    },
    handleSelect(e) {
      this.getZubi(e.meterId);
      this.meterId = e.meterId;
      this.charge.meterName = e.meterName;
      this.charge.chargeTimes = e.chargeTimes ? e.chargeTimes : 1;
      this.charge.meterNumber = e.meterNumber;
      this.charge.meterSinglePrice = e.meterSinglePrice;
      this.charge.meterSurplusCount = e.meterSurplusCount;
      this.charge.meterCount = (
        Number(this.moneyList[0].num) /
        Number(this.charge.meterSinglePrice) /
        Number(this.charge.chargeTimes)
      ).toFixed(2);
    },
    clear() {
      this.$refs.autocomplete.activated = true;
      this.charge.zubi = "";
      this.charge.meterName = "";
      this.charge.chargeTimes = "";
      this.charge.meterNumber = "";
      this.charge.meterSinglePrice = "";
      this.charge.meterSurplusCount = "";
      this.charge.meterCount = "0";
      for (var i = 0; i < this.moneyList.length; i++) {
        this.moneyList[i].select = false;
      }
      this.moneyList[0].select = true;
      this.charge.money = 100;
    },
    // 聚焦
    focus() {
      this.charge.meterCount = "0";
      this.charge.money = "";
      for (var i = 0; i < this.moneyList.length; i++) {
        this.moneyList[i].select = false;
      }
    },
    // 监听金额
    input(e) {
      if (this.charge.meterNumber) {
        this.charge.meterCount = (
          Number(e) /
          Number(this.charge.meterSinglePrice) /
          Number(this.charge.chargeTimes)
        ).toFixed(2);
      }
    },
    // 选择金额
    select(e) {
      this.inputPrice = "";
      for (var i = 0; i < this.moneyList.length; i++) {
        this.moneyList[i].select = false;
      }
      this.charge.money = this.moneyList[e].num;
      this.moneyList[e].select = true;
      if (this.charge.meterNumber) {
        this.charge.meterCount = (
          Number(this.moneyList[e].num) /
          Number(this.charge.meterSinglePrice) /
          Number(this.charge.chargeTimes)
        ).toFixed(2);
      }
    },
    pay() {
      if (sessionStorage.getItem("payWay") == 1) {
        this.$message.error(
          "当前付款方式为线上付款,不支持租币充值,请修改后重试!"
        );
      } else {
        let loading = this.$loading({
          lock: true,
          text: "充值中...",
        });
        let arr = {
          rechargeAmount: this.inputPrice
            ? Number(this.inputPrice)
            : Number(this.charge.money),
        };
        postZubiApi(this.meterId, arr)
          .then((res) => {
            if (res.code == 200) {
              loading.close();
              this.$message.success("租币充值成功!");
              this.getZubi(this.meterId);
            }
          })
          .catch(() => {
            loading.close();
          });
      }
    },
    clearZubi() {
      this.$confirm(
        `当前设备租币余额为${this.charge.zubi},是否确认清零操作`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then((res) => {
          let loading = this.$loading({
            lock: true,
            text: "清零中...",
          });
          clearZubiApi(this.meterId)
            .then((res) => {
              if (res.code == 200) {
                loading.close();
                this.getZubi(this.meterId);
                this.$message.success("清零成功!");
              }
            })
            .catch(() => {
              loading, close();
            });
        })
        .catch(() => {
          this.$message.info("已取消清零!");
        });
    },
  },
};
</script>

<style lang="scss">
.money {
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: space-around;
  .top {
    width: 95%;
    box-sizing: border-box;
    height: 6%;
    background: #fff;
    border-radius: 30px;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .title {
      box-sizing: border-box;
      background: #ffdbd4;
      color: #ff4d26;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .el-autocomplete {
    width: 100%;
  }

  .content {
    width: 95%;
    margin: 0 auto;
    height: 88%;
    border-radius: 30px;
    background: #fff;
    padding: 10px;

    .form {
      width: 60%;
      margin: 1% auto;
      .el-form-item {
        margin-bottom: 3.2% !important;
      }
      .el-form {
        width: 100%;
        .el-input {
          width: 100%;
        }
        .box {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 0 10px;
          flex-wrap: wrap;
          align-items: center;

          .item {
            cursor: pointer;
            width: 24%;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 30rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
            border: 1px solid #5277ff;
            border-radius: 30px;
          }
          .el-input-group {
            width: 45% !important;
          }
          .btn {
            width: 20%;
            float: right;
            .el-button {
              width: 100%;
            }
          }
          .select {
            background-color: #5277ff;
            color: #fff;
            border: 1px solid #fff;
          }

          .el-input {
            width: 40%;
            margin: 20px 0;
            color: #5277ff;
            border-radius: 30px;
          }
        }
      }
    }
  }
}
</style>
